import React from "react";
import { connect } from "react-redux";
import "./index.scss";
import { LoginKey, LoginCreateQr, LoginGetCookies, GetLoginStatus, GetUserInfo} from "../../api/user";
import {SetUserInfo, SetCookies, SetUserId} from "../../store/action";
import { setToken } from "../../assets/cookies";


const mapStateToProps = (state) => {
    return {
        state,
    };
}

const mapDispatchToProps = (dispatch) => {
    return {
        setUinfo: (form) => dispatch(SetUserInfo(form)),
        setCookies: (cookies) => dispatch(SetCookies(cookies)),
        setUid: (id) => dispatch(SetUserId(id)),
    }
}

class QrLogin extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            loginkey: null,
            qrimg: null,
            qrstatus: 0, // 0-待扫码 1-待确定 2-登录成功 -1-二维码失效
        }
        this.getCheck = this.getCheck.bind(this);
    }

    componentDidMount() {
        console.log('触发');
        this.GetQrImages();
    }

    componentWillUnmount(){
        clearInterval(this.timer);
    }


    GetQrImages(){
        LoginKey({timerstamp: Date.now()}).then(res => {
            const { code, data } = res;
            if(code == 200){
                this.setState({
                    loginkey: data.unikey,
                });
                let getQRform = {
                    key: data.unikey,
                    qrimg: true,
                    timerstamp: Date.now(),
                }
                LoginCreateQr(getQRform).then(result => {
                    const { code, data } = result;
                    if(code == 200){
                        this.setState({
                            qrimg: data.qrimg,
                        });
                        // 获取到二维码后轮巡查看扫码状态
                        this.timer = setInterval(() => {
                            this.getCheck(this.state.loginkey);
                        },3000);
                    }
                })
            }
        })
    }

    getCheck(key){
        let cooliesform = {
            key: key,
            timerstamp: Date.now(),
        }
        LoginGetCookies(cooliesform).then(res => {
            const { code, message, cookie } = res;
            if(code == 800){
                // 二维码过期
                this.setState({
                    qrstatus: -1,
                })
            }else if(code == 801){
                // 等待扫码
                this.setState({
                    qrstatus: 0,
                })
            }else if(code == 802){
                // 待确认
                this.setState({
                    qrstatus: 1,
                })
            }else if(code == 803){
                // 授权成功
                clearInterval(this.timer);
                this.setState({
                    qrstatus: 2,
                })
                this.props.setCookies(cookie);
                setToken(cookie);
                this.getUserInfo();
            }
        })
    }


    getUserInfo(){
        let form = {
            timerstamp: Date.now(),
        }
        GetLoginStatus(form).then(res => {
            const { code, account, profile } = res.data;
            if(code == 200){
                this.props.setUid(profile.userId);
                let userform = {
                    uid: profile.userId,
                }
                GetUserInfo(userform).then(res => {
                    const { code } = res;
                    if(code == 200){
                        this.props.setUinfo(res);
                    }
                })
                this.props.content();
            }
        });



    }


    render() {
        const { qrimg } = this.state;
        return(
            <div className="QrLoginPage">
                <h2 className="title">扫码登录</h2>
                <div className="Qrimg_box">
                    <img className="QRimg" id="qrImg" src={qrimg} />
                </div>
                <span className="tips">使用网易云app扫码登录</span>

                <div className="OtherLogin">
                    选择其他登录模式>
                </div>
            </div>
        )
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(QrLogin);